<template>
  <Card v-style="'boxstyle_bg_1'" title="友情链接">
    <div class="table">
      <div class="th">
        <p>
          <span>域名</span>
          <span>友情链接</span>
          <span>捕获时间</span>
        </p>
      </div>
      <div class="tb" v-AnimateScroll>
        <p style="cursor: pointer;" v-for="(item,index) in list" :key="index" @click="openUrl(item.url.url)">
          <span v-title>{{item.host}}</span>
          <span v-title>{{item.url.url}}</span>
          <span v-title>{{item.created_at || '-'}}</span>
        </p>
      </div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { ref, onMounted, toRefs, defineProps, watch } from "vue";
import Card from "@/components/Card";
import { bigDataApi } from "@/api/bigData";
import store from "@/store";
import router from "@/router";
const list = ref([]);
let date = 'day';
const props = defineProps({
  selectdate:{
    type: String,
    default: 'day'
  }
})
const { selectdate } = toRefs(props);

console.log(props)

watch(
  selectdate,
  (e) => {
    // console.log(e)
    date = e;
    getShipList();
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  // 获取友情链接
  // getShipList()
});
async function getShipList() {
  const result = await bigDataApi.friendshipList({
    token: store.getters.user.token,
    limit: 50,
    date: date
  });
  const { data } = result
  list.value = data.data
}
function openUrl(url){
  router.push("/urlLibrary?url=" + url);
}
</script>

<style lang="less" scoped>
.table {
  height: 100%;
  display: flex;
  flex-direction: column;

  .th > p,
  .tb > p {
    padding: 15px 20px;
    font-size: 14px;

    display: flex;
    align-content: center;
    span {
      width: 50%;
      padding: 0 10px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .th {
    color: #cbd2d5;
    font-size: 16px;
  }
  .tb {
    flex: 1;
    overflow-y: auto;
  }
  .tb > p {
    background: #131313;
    border-radius: 5px;
    margin-bottom: 10px;
  }
}
</style>
